{# 继承母版 #}
{% extends 'base.html' %}
{% block page-title %}
    <title>关于博主</title>
{% endblock %}
{% block page-content %}
    <div class="container" style="margin-top:16px">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">关于博主</h4>
                <hr>
                <p class="card-text text-center text-sm-center text-xl-center text-lg-center bg-info text-white"><span
                        class="float-left bg-primary">&nbsp;&nbsp;</span>个人简介</p>
                <p class="text-center text-sm-center text-xl-center text-lg-center"><img src="../static/image/dog.jpg"
                                                                                         alt="" style="height: 60px">
                </p>
                <p class="card-text text-center text-sm-center text-xl-center text-lg-center"><b>刘飞</b></p>
                <p class="card-text text-center text-sm-center text-xl-center text-lg-center">来自河南、现居深圳、职业软件工程师</p>
                <p class="card-text text-center text-sm-center text-xl-center text-lg-center">
                    涉及方向有:网络爬虫、Web开发、数据分析、机器学习等</p>
                <p class="card-text text-center text-sm-center text-xl-center text-lg-center"><b>座右铭:&nbsp;&nbsp;&nbsp;&nbsp;</b><b><i
                        class="masked">优秀的人从来不会甘于现状</i></b></p>
                <br>
                <br>
                <p class="card-text text-center text-sm-center text-xl-center text-lg-center bg-info text-white"><span
                        class="float-left bg-primary">&nbsp;&nbsp;</span>我的技能树</p>
                <div class="row">
                    <div class="col-md-6 offset-md-3">
                        <div class="progress">
                            <div class="progress-bar" style="width:80%">PYTHON&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;80%</div>
                        </div>
                        <br>
                        <div class="progress">
                            <div class="progress-bar bg-success" style="width:70%">前端&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;70%</div>
                        </div>
                        <br>
                        <div class="progress">
                            <div class="progress-bar bg-info" style="width:70%">数据库&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;70%</div>
                        </div>
                        <br>
                        <div class="progress">
                            <div class="progress-bar bg-warning" style="width:60%">其他&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;60%</div>
                        </div>
                        <br>
{#                        <div class="progress">#}
{#                            <div class="progress-bar bg-danger" style="width:70%"></div>#}
{#                        </div>#}

                    </div>
                </div>

            </div>
        </div>
    </div>


    <style>
        @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
            .masked {
                background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
                -webkit-text-fill-color: transparent;
                -webkit-background-clip: text;
                -webkit-background-size: 200% 100%;
                -webkit-animation: masked-animation 4s infinite linear;
            }
        }

        @-webkit-keyframes masked-animation {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -100% 0;
            }
        }

    </style>
{% endblock %}







